<template>
    <view class="page">
        <div class="header" :style="'padding-top:' + header_p_top">
            <div class="fx">
                <div class="back fx jcc" @click="back">
                    <Nimg src="back.png" width="80" height="88" />
                </div>
                <div class="search fx" :style="'height:' + jiaonang_height">
                    <div class="icon">
                        <Nimg src="002ss.png" width="26" height="26" />
                    </div>
                    <input
                        type="text"
                        placeholder="搜索"
                        v-model="key"
                        :focus="true"
                        class="fx1"
                        confirm-type="search"
                        placeholder-style="color:#b4b4b4;"
                        @confirm="searchNow"
                    />
                    <div class="btn fx jcc" @click="searchNow">搜索</div>
                </div>
            </div>
        </div>
        <div style="height: 180rpx"></div>
        <div class="info">
            <div class="group" v-if="proList.length > 0">
                <div
                    class="item fx"
                    v-for="(i, index) in proList"
                    :key="index"
                    @click="$go('kechengxiangqing?id=' + i.Id)"
                >
                    <div class="img">
                        <Nimg
                            :src="i.thumb_src + i.photo"
                            width="181"
                            height="181"
                        />
                    </div>
                    <div class="irr fx1">
                        <div class="name">
                            {{ i.name }}
                        </div>
                        <div class="ims">
                            {{ i.info }}
                        </div>
                        <div class="ibot fx">
                            <div class="price fx">
                                <div class="dw">￥</div>
                                <div class="num">{{ i.price }}</div>
                            </div>
                            <div class="yj">原价￥{{ i.oprice }}</div>
                            <div class="fx1"></div>
                            <div class="ys">已售{{ i.sold_num }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="empty" v-if="loaded && proList.length === 0">
                <Nimg src="001x.png" width="750" height="609" />
            </div>
        </div>
    </view>
</template>
<script>
import $ from "@/common";
export default {
    data() {
        return {
            activeTabIndex: 0,
            header_p_top: "",
            jiaonang_height: "",
            banner: [],
            domain: $.domain,
            isShowLogin: false,
            isLogin: false,
            isTuanzhang: false,
            proList: [],
            key: "",
            loaded: false,
        };
    },
    watch: {},
    methods: {
        setHeader() {
            const res = wx.getMenuButtonBoundingClientRect();
            this.header_p_top = res.top - 6 + "px";
            this.jiaonang_height = res.height + "px";
        },
        searchNow() {
            let url = $.index("search");
            let data = {
                search: this.key,
            };
            if (!this.key) {
                return;
            }
            this.loaded = false;
            $.post(url, data).then((res) => {
                if (res.isError) {
                    return;
                }
                this.proList = $.change(res);
                this.loaded = true;
            });
        },
        getBanner() {
            let url = $.index("bannerList");
            $.post(url).then((res) => {
                if (res.isError) {
                    return;
                }
                this.banner = $.change(res);
            });
        },
        init() {
            this.setHeader();
        },
    },
    onShow() {
        this.init();
    },
    onLoad(o) {},
};
</script>


<style lang="less" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
}

.header {
    padding-left: 30rpx;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    background: #fff;
    height: 180rpx;
    .search {
        width: 380rpx;
        background: #ffffff;
        border: 2rpx solid #f2f2f2;
        border-radius: 10rpx;
        margin-left: 20rpx;
        padding-left: 22rpx;
        position: relative;
        .icon {
            margin-right: 12rpx;
        }
        .btn {
            width: 100rpx;
            height: calc(100% + 4rpx);
            background: #01c35e;
            color: #fff;
            position: relative;
            top: -2rpx;
            right: -20rpx;
            border-radius: 0 10rpx 10rpx 0;
        }
    }
}

.info {
    height: calc(100% - 180rpx);
    .group {
        padding: 30rpx;
        padding-bottom: 100rpx;
        .item {
            margin-top: 55rpx;
            &:first-child{
                margin-top: 0;
            }
            .irr {
                height: 180rpx;
                padding-left: 26rpx;
                .name {
                    font-size: 30rpx;
                    font-weight: bold;
                    line-height: 1.2;
                }
                .ims {
                    font-size: 22rpx;
                    color: #8b8b8b;
                    margin-top: 20rpx;
                }
                .ibot {
                    padding-top: 20rpx;
                    .price {
                        color: #e62000;
                        font-weight: bold;
                        font-size: 38rpx;
                        .dw {
                            font-size: 20rpx;
                            font-weight: normal;
                            padding-top: 6rpx;
                        }
                    }
                    .yj {
                        margin-left: 12rpx;
                        color: #909090;
                    }
                    .ys {
                        color: #898989;
                    }
                }
            }
        }
    }
}
</style>

